<template>
  <div class="search">
    <van-search id="keywordInput" v-model="keywords" @clear="handleClearKeywords()" placeholder="请输入搜索关键词"/>
    <div style="background: white;padding-left: 1em" v-show="dataList.length>0">
      <div v-for="item in dataList" @click="handleItemClick(item)">{{item.name}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Search",
    data() {
      return {
        keywords: '',
        dataList: [],
        marker: null,
        infoWindow: null,
        data:null,
        userPos:  [119.67109414303, 25.978347494],
        driving:null
      }
    },
    watch: {
      keywords(val, oldval) {
        var self = this;
        if (val == '') {
          this.dataList = []
          return
        }
        AMap.plugin('AMap.AutoComplete', () => {
          var autoOptions = {
            city: '全国'
          };
          var autoComplete = new AMap.AutoComplete(autoOptions);
          autoComplete.search(val, function (status, result) {
            self.dataList = result.tips
          })
        })
      }
    },
    methods: {
      initData() {
        this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      },
      // 选择其中一条查询结果
      handleItemClick(data) {
        this.data = data
        this.keywords = data.name;
        if (this.marker) {
          map.remove(this.marker)
        }
        if ('location' in data && data['location'] != '') {
          var pos = [data.location.lng, data.location.lat]
          this.marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: pos
          });

          window.handleNavigate = this.handleNavigate;
          this.marker.content = `<div>${data.name}</div><button onclick="handleNavigate()">导航</button>`;
          this.marker.on('click', this.markerClick)

          map.add(this.marker);
          var position = new AMap.LngLat(pos[0], pos[1]);
          map.setCenter(position);
          setTimeout(() => {
            this.dataList = []
          }, 1000)
        }
      },
      markerClick(e) {
        this.infoWindow.setContent(e.target.content);
        this.infoWindow.open(map, e.target.getPosition());
      },
      handleNavigate() {
        var data =  this.data
        console.log(data)
        var self = this;
        AMap.plugin('AMap.Driving', () => {
          this.driving = new AMap.Driving({
            policy: AMap.DrivingPolicy.LEAST_TIME,
            map: map,
            panel: 'driver'
          });
          var startLngLat = self.userPos;
          // var startLngLat = [119.67109414303, 25.978347494];
          var endLngLat = [data.location.lng, data.location.lat]
          this.driving.search(startLngLat, endLngLat, (status, result) => {
            console.log(result)
            this.$parent.showDriver = true;
          })
        })
      },
      handleClearKeywords() {
        this.keywords = '';
        if (this.marker) {
          map.remove(this.marker)
        }
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>

<style scoped>

  .search {
    position: absolute;
    width: calc(100% - 2em);
    z-index: 1;
    margin: 1em;
  }

  .van-search {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.5em;
  }
</style>
